<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <select v-model="selected" @change="onSelect()">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
      </select>
      <input type="checkbox" v-model="showAnswer" />显示答案
      <p>{{ title }}</p>
      <p>{{ message }}</p>
      <ul v-for="item in exam" :key="item.Id">
        {{ item.Id }}
        <div v-html="item.Title"></div>
        <li v-for="sitem in item.SelectedItems" :key="sitem.ItemName">
          {{ sitem.ItemName }}
          <div v-html="sitem.Content"></div>
        </li>
        <div v-show="showAnswer">
          <br />答案：{{ item.Answer }}<br />
          <div v-html="item.Describe"></div>
        </div>
      </ul>
    </div>

    <script>
      const onSelect = () => {
        fetch(vm.selected || "rw/base/A1_1.json").then((res) => {
          res.json().then((data) => {
            const testinfo = data.data.test.StyleItems[0];
            const { Explain, Style, TestItems } = testinfo;
            vm.message = `${Explain}`;
            vm.title = `${Style}`;
            console.log(TestItems);
            const testItems = TestItems.reduce((pre, cur, index) => {
              const {
                SelectedItems,
                Explain: Describe,
                Answer,
                FrontTitle,
                Title,
                StyleType,
                BTestItems,
                A3TestItems,
              } = cur;
              if (StyleType === "BTEST") {
                BTestItems.forEach((bItem, idx) => {
                  pre.push({
                    SelectedItems,
                    Describe: idx === 0 ? Describe : "同上",
                    Answer: bItem.Answer,
                    Id: `${index}-${idx}`,
                    Title: bItem.Title,
                  });
                });
              } else if (StyleType === "A3TEST") {
                A3TestItems.forEach((bItem, idx) => {
                  pre.push({
                    SelectedItems,
                    Describe: idx === 0 ? Describe : "同上",
                    Answer: bItem.Answer,
                    Id: `${index}-${idx}`,
                    Title: FrontTitle + bItem.Title,
                  });
                });
              } else
                pre.push({
                  SelectedItems,
                  Describe,
                  Answer,
                  Id: index,
                  Title,
                });
              return pre;
            }, []);

            vm.exam = testItems;
          });
        });
      };
      var vm = new Vue({
        el: "#app",
        data: {
          title: "",
          message: "Hello Vue.js!",
          exam: [],
          selected: "rw/base/A1_1.json",
          options: [
            { text: "基础A1.1", value: "rw/base/A1_1.json" },
            { text: "基础A1.2", value: "rw/base/A1_2.json" },
            { text: "基础A1.3", value: "rw/base/A1_3.json" },
            { text: "基础B", value: "rw/base/B.json" },
            { text: "专业相关A1A2.1", value: "rw/related/A1A2_1.json" },
            { text: "专业相关A1A2.2", value: "rw/related/A1A2_2.json" },
            { text: "专业相关A3A4", value: "rw/related/A3A4.json" },
            { text: "专业相关B", value: "rw/related/B.json" },
            { text: "专业A1A2.1", value: "rw/major/A1A2_1.json" },
            { text: "专业A1A2.2", value: "rw/major/A1A2_2.json" },
            { text: "专业A1A2.3", value: "rw/major/A1A2_3.json" },
            { text: "专业A3A4", value: "rw/major/A3A4.json" },
            { text: "专业相关B", value: "rw/major/B.json" },
            { text: "实践", value: "rw/practice/analysis.json" },
          ],
          showAnswer: true,
        },
        methods: {
          onSelect,
        },
      });
      onSelect();
    </script>
  </body>
</html>
